<template>
  <el-header class="nav-header">
    <div class="nav-container">
      <div class="nav-left">
        <router-link to="/" class="logo">
          HIIT商城
        </router-link>
        <el-menu 
          mode="horizontal" 
          :router="true"
          class="nav-menu"
          :default-active="$route.path"
        >
          <NavMenuItem to="/" label="首页" />
          <NavMenuItem to="/courses" label="课程中心" />
          <!-- <NavMenuItem to="/learning-path" label="学习路径" /> -->
          <NavMenuItem to="/about" label="关于我们" />
        </el-menu>
      </div>
      <div class="nav-right">
        <CartIcon />
        <el-button type="text" class="login-btn">登录</el-button>
        <el-button type="primary" class="register-btn">注册</el-button>
      </div>
    </div>
  </el-header>
</template>

<script setup>
import CartIcon from './CartIcon.vue'
import NavMenuItem from './common/NavMenuItem.vue'
import { useRoute } from 'vue-router'

const $route = useRoute()
</script>

<style scoped>
.nav-header {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background-color: #fff;
  height: 64px;
}

.nav-container {
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

.nav-left {
  display: flex;
  align-items: center;
  min-width:550px;
  height: 100%;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: var(--el-color-primary);
  text-decoration: none;
  margin-right: 48px;
  transition: all 0.3s ease;
}

.logo:hover {
  opacity: 0.8;
}

.nav-menu {
  border-bottom: none;
  height: 100%;
}

.nav-menu {
  flex: 1;
  min-width: 0;
}

.nav-menu :deep(.el-menu-item) {
  font-size: 16px;
  color: #333;
  padding: 0 12px;
  height: 100%;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.nav-menu :deep(.el-menu) {
  flex-wrap: nowrap;
  overflow: visible;
}

.nav-menu :deep(.el-menu-item:hover) {
  color: var(--el-color-primary);
  background-color: rgba(64, 158, 255, 0.05);
}

.nav-menu :deep(.el-menu-item.is-active) {
  color: var(--el-color-primary);
  font-weight: 500;
  border-bottom: 2px solid var(--el-color-primary);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-right: 12px;
  max-width: 240px;
}

.login-btn {
  color: #666;
  font-weight: 500;
  padding: 8px 16px;
}

.login-btn:hover {
  color: var(--el-color-primary);
}

.register-btn {
  padding: 8px 16px;
  font-weight: 500;
}

.register-btn:hover {
  opacity: 0.9;
}

@media (max-width: 768px) {
  .nav-container {
    padding: 0 16px;
  }
  
  .logo {
    margin-right: 24px;
    font-size: 20px;
  }
  
  .nav-menu :deep(.el-menu-item) {
    padding: 0 12px;
    font-size: 14px;
  }
}
</style>